import React, { Component } from 'react'
// 导入校验props的库
import PropTypes from 'prop-types'

// 渲染颜色值列表组件
const ColorList = (props) => {
  const { colors, d } = props
  console.log(props)
  if (!colors) return null
  return (
    <ul>
      <li>{d}</li>
      {colors.map((item) => (
        <li key={item} style={{ backgroundColor: item }}>
          {item}
        </li>
      ))}
    </ul>
  )
}

// props校验
ColorList.propTypes = {
  colors: PropTypes.array.isRequired,
  abc: PropTypes.string,
  obj: PropTypes.shape({
    a: PropTypes.string,
    b: PropTypes.bool,
  }),
  d: PropTypes.number,
}
// 设置props默认值
ColorList.defaultProps = {
  d: 10000,
}

export default class Index extends Component {
  state = {
    colorList: ['red', 'blue', 'orange', 'pink'],
    colorList2: { a: 'red' },
    obj: { a: 'dfd', b: true },
  }

  render() {
    return (
      <div>
        <h1>props校验</h1>
        <hr />
        <ColorList
          d={2}
          obj={this.state.obj}
          abc={'dfd'}
          colors={this.state.colorList}
        />
      </div>
    )
  }
}
